<template>
  <div>
    <!-- 前端学科 -->
    <div id="qian" class="radar"></div>
    <SortCom />
  </div>
</template>
<script>
import SortCom from './SortCom.vue'
import * as echarts from 'echarts'
export default {
  components: { SortCom },
  data() {
    return {}
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('qian'))

    var option

    option = {
      grid: {
        left: 10,
        right: 0,
        bottom: 10,
        top: 30,
        containLabel: true
      },
      tooltip: {
        // 鼠标悬浮提示数据
        trigger: 'axis',
        show: true,
        textStyle: {
          // 提示框内容的样式
          color: '#fff'
        },
        backgroundColor: 'rgba(23, 25, 38,0.4)',
        axisPointer: {
          type: 'cross' // 默认为line，line直线，cross十字准星，shadow阴影
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false, // echarts折线图配置折线和轴线距离
        data: [
          '一月',
          '二月',
          '三月',
          '四月',
          '五月',
          '六月',
          '七月',
          '八月',
          '九月',
          '十月',
          '十一月',
          '十二月'
        ],
        axisTick: {
          // 坐标轴的刻度
          show: false, // 是否显示
          inside: false, // 是否朝内
          length: 3, // 长度
          lineStyle: {
            color: '#3988fa', // 默认取轴线的颜色
            width: 1,
            type: 'solid'
          }
        },
        axisLine: {
          // 坐标轴 轴线
          show: true, // 是否显示
          // ------   线 ---------
          lineStyle: {
            color: '#3988fa',
            width: 1,
            type: 'solid'
          }
        }
      },
      yAxis: {
        type: 'value',
        axisTick: {
          // 坐标轴的刻度
          show: false, // 是否显示
          inside: false, // 是否朝内
          length: 3, // 长度
          lineStyle: {
            color: '#3988fa', // 默认取轴线的颜色
            width: 1,
            type: 'solid'
          }
        },
        axisLine: {
          // 坐标轴 轴线
          show: true, // 是否显示
          // ------   线 ---------
          lineStyle: {
            color: '#3988fa',
            width: 1,
            type: 'solid'
          }
        }
      },
      series: [
        {
          name: '试题数量',
          data: [100, 120, 161, 134, 105, 160, 165, 100, 120, 161, 134, 105],
          type: 'line',
          smooth: true,
          itemStyle: {
            // 背景色
            color: '#3988fa'
          }
        }
      ]
    }

    option && myChart.setOption(option)
  },
  created() {},
  methods: {}
}
</script>
<style scoped>
.radar {
  width: 750px;
  height: 300px;
}
</style>
